<template>
  <div class="page-task">
    <!-- <div class="page-task-banner"></div> -->
    <div class="page-task-content">
      <!-- <div class="page-task-title mt-8 f-18 bold text-center">{{ detailData.taskName }}</div> -->
      <div class="page-task-body mt-8 gray-color6 f-14" v-if="detailData.taskContent">
        {{ detailData.taskContent }}
      </div>
      <!-- <div class="flex-row justify-center align-items-center">
        <div class="page-task-time mt-24 f-14">
          时间截止: 2025年1月11日 到 2025年5月11日
        </div>
      </div> -->
      <!-- <div class="page-task-votingbox mt-24">
        <div v-for="(item, index) in userList" class="page-task-votingitembox flex-row" :key="index">
          <div class="bold mr-12 w-50">{{ item.name }}</div>
          <div class="flex-1 flex-row align-items-center">
            <div class="flex-1">
              <van-progress :percentage="item.progress" stroke-width="8"  color="#07c160" />
            </div>
            <div class="w-60 text-right gray-color">
              {{ item.num || 0 }} 人
            </div>
          </div>
        </div> 
        
      </div> -->
      <div class="page-task-voting mt-24">
        <div v-for="(item, index) in detailData.userScoreList" class="page-task-votingitem" :key="index" :id="`aa${index+1}`">
          <div class="bold page-task-username">{{ item.userInfo.username }}</div>
          <div v-if="detailData.showType == 2">
            <van-radio-group v-model="item.value" :disabled="detailData.submit || detailData.status !=1" direction="horizontal" icon-size="16px" checked-color="#3271f6">
              <van-radio :name="item.scoreNum" v-for="(item, index) in detailData.scoreOptionsList" :disabled="getRiadioDiabled.includes(item.scoreNum)" :key="index">{{  item.name }}</van-radio>
            </van-radio-group>
          </div>
          <div v-if="detailData.showType == 1">
            <pk-select placeholder="请选择" :options="options" v-model="item.value" :data="detailData" :disabled="detailData.submit || detailData.status !=1" :selValue="selValue" @onHandlerColseItem="onHandlerColseItem"></pk-select>
          </div>
        </div>  
      </div>

      <!-- <div class="page-task-voting mt-24">
        <div v-for="(item, index) in userList" class="page-task-votingitem" :key="index">
          <div class="bold">{{ item.name }}</div>
          <div>
            <pk-select placeholder="请选择" :options="options" v-model="item.value" :selValue="selValue" @change="onHandlerColseItem"></pk-select>
          </div>
        </div>  
      </div> -->
      <!-- <div class="page-task-footer mt-24"> 
        <van-divider dashed>到底部</van-divider>
        <div class="page-task-footerbtn"></div>
      </div> -->
    </div>
    <div class="page-task-fixed mt-24 align-items-center justify-center">
      <div v-if="detailData.status == 1 && !detailData.submit" @click="submitBtn" class="page-task-fixedheader align-items-center justify-center">
        提交
      </div>
      <div v-if="detailData.status == 1 && detailData.submit" class="page-task-fixedheader align-items-center justify-center">
        已提交
      </div>
      <div class="page-task-fixedheader page-task-onstatus align-items-center justify-center" v-if="detailData.status == 0">
        未开始
      </div>
      <div class="page-task-fixedheader page-task-onstatus align-items-center justify-center" v-if="detailData.status == 2">
        已结束
      </div> 
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, computed, onUnmounted } from 'vue'
  import pkSelect from '@/components/pkui/pk-select/pk-select.vue'
  import { taskGetDetail, TaskSubmit } from '@/api/api'
  import { useRoute } from 'vue-router'
  import { showToast, showConfirmDialog  } from 'vant';
  const route = useRoute()
  const userList = ref([])
  const detailData = ref({})
  const timer = ref(null)
  const selValue = computed(() => {
    return detailData.value.userScoreList.filter(item => item.value).map(item => item.value)
  })

  const options = ref([
    {
      label: '第一名',
      value: 1,
      disabled: true
    },
    {
      label: '第二名',
      value: 2
    },
    {
      label: '第三名',
      value: 3
    },
    {
      label: '第四名',
      disabled: true,
      value: 4
    },
    {
      label: '第五名',
      disabled: true,
      value: 5
    },
    {
      label: '第六名',
      value: 6
    },
    {
      label: '第七名',
      value: 7
    }
  ])

  const getRiadioDiabled = computed(() => {
    if (!detailData.value) {
      return [] 
    }
    if (detailData.value?.optionsType == 2) {
      return [] 
    }
    return detailData.value?.userScoreList?.filter(item => item.value).map(item => item.value)
  })

  const onHandlerColseItem = (e) => {
    console.log('---------onColseItemindex------------', e)
    detailData.value.userScoreList.forEach(item => {
      if (item.value == e.value) {
        item.value = ''
      }
    })
  }

  const setTitle = () => {
    // let list = new Array(parseInt(Math.random() * 10)).fill(" ").map( item => "")
    // document.title = detailData.value.taskName +  "" + list
    dd.setTitle({
      title: detailData.value.taskName
    })
  }

  const getDetail = (e) => {
    const { id } = route.query
    taskGetDetail({
      id
    }).then(res => { 
      detailData.value = {
        ...res.resData,
        userScoreList: res.resData.userScoreList.map(item => {
          return {
            ...item,
            value: item.scoreNum
          }
        })
      }
      userList.value = res.resData.userScoreList.map(item => {
        return {
          ...item,
          ...item.userInfo
        }
      })
      if (res.resData.optionsType == 2  || (res.resData.optionsType == 1 && res.resData.showType == 1)) {
        options.value = res.resData.scoreOptionsList.map(item => {
          return {
            ...item,
            label: item.name,
            value: item.scoreNum
          }
        })
      }
      timer.value = setTimeout(() => {
        setTitle()
      }, 500)
    }) 
  }

  const submitBtn = () => {
    window.scrollTo(0, 0)
    const { id } = route.query
    for(var i = 0; i < detailData.value.userScoreList.length; i++){
      if (!detailData.value.userScoreList[i].value) {
        showToast('选择项第' + (i + 1) + '没有选择')
        const top = document.getElementById('aa' + (i+1)).getBoundingClientRect().top
        console.log(top)
        window.scrollTo(0, top - 24)
        break
      }
    }

    const userScoreList = detailData.value.userScoreList.map(item => {
      let score = detailData.value.scoreOptionsList.find(a => a.scoreNum == item.value)
      return {
        name: score.name,
        scoreNum: item.value,
        evaluatorId: item.userInfo.id
      }
    })

    showConfirmDialog({
      title: '提示',
      message:'确认提交？'
    }) .then(() => {
      TaskSubmit({
        id:id,
        userScoreList: userScoreList
      }).then(res => {
        showToast('提交成功')
        getDetail()
      })
    }) 
  }


  onUnmounted(() => {
    clearTimeout(timer.value)
    dd.setTitle({
      title: '督考测评系统'
    })
  })
  onMounted(() => {
    getDetail()
    window.scrollTo(0, 0)
  })

</script>

<style lang="scss" scoped>
  .page-task{
    padding-bottom: 360px;
    min-height:100vh;
    background: #fff;
    &-banner{
      height: 180px;
      background: url("@/assets/icon/banner.jpg") center center/ cover no-repeat;
      width: 100%;
    }
    &-username{
      min-width:60px
    }
    &-content{
      padding: 12px;
    }
    &-time{
      background: url("@/assets/icon/time.png") center left no-repeat;
      background-size: 24px auto;
      padding-left: 28px;
      height: 30px; 
      line-height: 30px;
    }
    &-voting {
      border: #3271f6 2px solid;
      padding: 12px;
      border-radius: 8px;
      min-height: 100px;
    }

    &-votingbox {
      border: #07c160 2px solid;
      padding: 12px;
      border-radius: 8px;
      min-height: 100px;
    }

    &-votingitem{
      height: 32px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: #ddd 1px solid;
      padding: 12px 0;
    }

    &-votingitembox{
      height: 32px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: #ddd 1px solid;
      padding: 12px 0;
    }

    &-votingitem:last-child, &-votingitembox:last-child{
      border-bottom: none;
    }

    &-votingitembtn{
      height: 32px;
      line-height: 32px;
      // border: #000 2px solid;
      border-radius: 32px;
      min-width: 80px;
      text-align: center;
      // background: linear-gradient(to right, #6e3bc6, #7949b6);
      background: #3271f6;
      color: #fff;
      font-weight: bold;
    }

    &-fixed{
      position: fixed;
      bottom:0;
      left:0;
      right: 0;
      background: #fff;
      z-index: 1000;
      display: flex;
    }

    &-fixedheader{
      height: 50px;
      width: 100%;
      background: #3271f6;
      display: flex;
      font-size: 16px;
      color: #fff;
    }
    &-onstatus{
      background: #999;
    }
  }
  
</style>